<template>
	<div class="bigScreen">
		<div class="container">
			<div class="header echarts_box">
				<headerLink></headerLink>
			</div>
			<div class="body">
				<div class="left">
					<div class="left1 echarts_box">
                        <meterCharts></meterCharts>
					</div>
					<div class="left2 echarts_box">
					</div>
					<div class="left3 ">
						<div class="left echarts_box">
							<progressCharts></progressCharts>
						</div>
						<div class="right echarts_box">
                            <progressCharts></progressCharts>
						</div>

					</div>
					<div class="left4 echarts_box">
						<liquidFill></liquidFill>						
					</div>
				</div>
				<div class="center">
					<div class="center1">
						 <!--<pieShow></pieShow>-->	
						<map3d></map3d>
					</div>
					<div class="center2 echarts_box">
                        <bar3d></bar3d>
					</div>
				</div>
				<div class="right">
					<div class="right1 echarts_box">
					</div>
					<div class="right2 echarts_box">
					   <pieShow></pieShow>
					</div>
					<div class="right3 echarts_box">
					   <pieShow2></pieShow2>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import headerLink from '@/components/index/header.vue'
	import liquidFill from '@/components/index/水晶球.vue'
	import bar3d from '@/components/index/3D柱状图.vue'
	import progressCharts from '@/components/index/进程图.vue'
	import map3d from '@/components/index/立体地图.vue'
	import pieShow from '@/components/index/pieShow.vue'
	import pieShow2 from '@/components/index/pieShow2.vue'
	import meterCharts from '@/components/index/仪表图.vue'
	export default {
		components: {
			headerLink,
			liquidFill,
			bar3d,
			progressCharts,
			map3d,
			pieShow,
			pieShow2,
			meterCharts
		},
		data() {
            return {
            	
            }
		},
		created() {

		},
		beforeDestroy() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.bigScreen {
		.container {
			position: absolute;
			display: flex;
			flex-direction: column;
			background: url(/img/bigScreen/16.png)no-repeat;
			background-size: 100% 100%;
			width: 100%;
			::-webkit-scrollbar {
				display: none;
			}
			* {
				box-sizing: border-box;
			}
			.header {
				height: 100px;
				margin-bottom: 10px;
			}
			.body {
				height: 970px;
				display: flex;
				justify-content: space-between;
				.left {
					width: 27%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.left1 {
						height: 15%;
					}
					.left2 {
						height: 15%;
					}
					.left3 {
						display: flex;
						justify-content: space-between;
						height: 32%;
						.left {
							width: 49%;
						}
						.right {
							width: 49%;
						}
					}
					.left4 {
						height: 36%;
					}
				}
				.center {
					width: 45%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.center1 {
						height: 63.3%;
						background: url(/img/bigScreen/02.png)no-repeat;
						background-size: 100% 100%;
						padding: 10px;
					}
					.center2 {
						height: 36%;
					}
				}
				.right {
					width: 27%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.right1 {
						height: 31.3%;
					}
					.right2 {
						height: 31.3%;
					}
					.right3 {
						height: 36%;
					}
				}
			}
			.echarts_box {
				box-shadow: inset 0 0 16px 0 rgba(53, 145, 255, .8);
				border: 1px solid #3591ff80;
			}
		}
	}
</style>